<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body >
	<div>
        <div id="container" style="width: 600px;height:400px;"></div>
	   <div id="main" style="width: 400px;height:300px;"></div>
	</div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script src="./_vendor/jquery/dist/jquery.min.js"></script>
	   <script src="./jexcel-master/dist/js/jquery.jexcel.js"></script>
	   <script src="./_vendor/popper.js/dist/umd/popper.min.js"></script>
	   <script src="./_vendor/bootstrap/dist/js/bootstrap.min.js"></script>
	   <script src="./_assets/js/custom.js"></script>
	   <script src="./js/jquery.min.js"></script>
	   <script type="text/javascript">
	var dom = document.getElementById("container");
	var dom1 = document.getElementById('main');
	var myChart = echarts.init(dom);
	var myChart1 = echarts.init(dom1);
	var app = {};
	var test=0;
	var gongxu = new Array();
	//$(document).ready(function(){
		console.log("dd");
	function refreshDiv1() {
			
		$.ajax({//查出机台对应的操机员和维修员并判断当前机台有没有异常
				type:'POST',
				url: "exceptionechar.php",//POST傳一個超長字串到後端
				dataType : "text",
				success: function(sss){
					console.log(sss);
					var option1 = {
					color: ['#3398DB'],
					title: {
						text: '机台状况'
					},
					tooltip: {
					trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								
							}
						}
					},
					legend: {
						data:['出货量']
					},
					xAxis: {
						data: ["运行数","停机数"]
					},
					yAxis: {},
					series: [{
						name: '机台数',
						type: 'bar',
						data: [100-sss, sss]
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart1.setOption(option1);
				
				}
			});
			$.ajax({
				type:'POST',
				async: false,
				dataType : "JSON",
				url:"getjtexception.php",
				success: function(data){
					for(var i=0;i<data.length;i++){
						gongxu[i]=data[i].number;
						console.log(gongxu[i]);
					}
					test=data[2].number;
				//gongxu=data;
					
				}
			});	
			
		option = null;
		var posList = [
			'left', 'right', 'top', 'bottom',
			'inside',
			'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
			'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
		];

		app.config = {
			rotate: 90,
			align: 'left',
			verticalAlign: 'middle',
			position: 'insideBottom',
			distance: 15,
			onChange: function () {
				var labelOption = {
					normal: {
						rotate: app.config.rotate,
						align: app.config.align,
						verticalAlign: app.config.verticalAlign,
						position: app.config.position,
						distance: app.config.distance
					}
				};
				myChart.setOption({
					series: [{
						label: labelOption
					}, {
						label: labelOption
					}, {
						label: labelOption
					}, {
						label: labelOption
					}]
				});
			}
		};


		var labelOption = {
			normal: {
				show: true,
				position: app.config.position,
				distance: app.config.distance,
				align: app.config.align,
				verticalAlign: app.config.verticalAlign,
				rotate: app.config.rotate,
				formatter: '{c}  {name|{a}}',
				fontSize: 16,
				rich: {
					name: {
						textBorderColor: '#fff'
					}
				}
			}
		};

		option = {//柱的颜色
			color: ['#003366', '#006699', '#99ff00', '#e5323e', '#6cacce', '#95323e'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: ['固', '焊', '点', '切', '分', '编']//柱上面的字
			},
			toolbox: {
				show: true,
				orient: 'vertical',
				left: 'right',
				top: 'center',
				feature: {
					mark: {show: true},
					dataView: {show: true, readOnly: false},
					magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
					restore: {show: true},
					saveAsImage: {show: true}
				}
			},
			calculable: true,
			xAxis: [//横轴
				{
					type: 'category',
					axisTick: {show: false},
					data: [GetDateStr(0)]
					//data: ['2012', '2013', '2014', '2015', '2016']
				}
			],
			yAxis: [//纵轴
				{
					type: 'value'
				}
			],
			series: [//柱、柱数
				{
					name: '固',//第一柱数值一下依次类推
					type: 'bar',
					barGap: 0,
					label: labelOption,
					//data: [gongxu[0], 332, 301, 334, 390]
					data: [gongxu[0]]
				},
				{
					name: '焊',
					type: 'bar',
					label: labelOption,
					//data: [gongxu[1], 182, 191, 234, 290]
					data: [gongxu[1]]
				},
				{
					name: '点',
					type: 'bar',
					label: labelOption,
				   // data: [gongxu[2], 232, 201, 154, 190]
					data: [gongxu[2]]
				},
				{
					name: '切',
					type: 'bar',
					label: labelOption,
				   // data: [gongxu[3], 77, 101, 99, 40]
					data: [gongxu[3]]
				}
				,
				{
					name: '分',
					type: 'bar',
					label: labelOption,
				   // data: [gongxu[4], 77, 101, 99, 40]
					data: [gongxu[4]]
				}
				,
				{
					name: '编',
					type: 'bar',
					label: labelOption,
					//data: [gongxu[5], 77, 101, 99, 40]
					data: [gongxu[5]]
				}
			]
		};;
		if (option && typeof option === "object") {
			myChart.setOption(option, true);
			
		}
		
	}
	//});
	$(function() {//5发送一次ajax请求
			var div1Flag = setInterval(refreshDiv1, 1000*5);
			//var div1Flag = setInterval(refreshDiv2, 1000*5);
			
		});	
	function GetDateStr(AddDayCount) {//获取时间
		var dd = new Date();
		dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
		var y = dd.getFullYear();
		var m = dd.getMonth()+1;//获取当前月份的日期
		if(m<10){
			m="0"+m;
		}
		var d = dd.getDate();
		if(d<10){
			d="0"+d;
		}
		var hh = dd.getHours();  //获取当前小时数(0-23)
		if(hh<10){
			hh="0"+hh;
		}
		var min = dd.getMinutes();
		if(min<10){
			min="0"+min;
		}
		var ss = dd.getSeconds();
		if(ss<10){
			ss="0"+ss;
		}
		return y + "-" + m + "-" + d + " " + hh + ":" + min + ":" + ss;
	}
       </script>
   </body>
</html>